/* 
    Document   : style
    Created on : Jul 25, 2013, 10:09:52 AM
    Author     : Viet Hung
    Description:
        Purpose of the stylesheet follows.
*/
/*body{font-family: "Myriad Pro",PTSansCaptionRegular, arial, helvetica, sans-serif;font-weight: 100;}*/
@font-face{
    font-family: SFUHelveticaLight;
    src: url('../fonts/SFUHelveticaLight.eot');
    src: url('../fonts/SFUHelveticaLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFUHelveticaLight.woff') format('woff'),
        url('../fonts/SFUHelveticaLight.ttf') format('truetype'),
        url('../fonts/SFUHelveticaLight.svg#webfontg8dbVmxj') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family: SFUHelveticaNeueUltraLight;
    src: url('../fonts/SFUHelveticaNeueUltraLight.eot');
    src: url('../fonts/SFUHelveticaNeueUltraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SFUHelveticaNeueUltraLight.woff') format('woff'),
        url('../fonts/SFUHelveticaNeueUltraLight.ttf') format('truetype'),
        url('../fonts/SFUHelveticaNeueUltraLight.svg#webfontg8dbVmxj') format('svg');
    font-weight: normal;
    font-style: normal;
}
*{margin: 0;padding: 0}
body {font-family:SFUHelveticaLight,“Myriad Pro”, Arial, Helvetica, sans-serif; background:url(../image/background/background.jpg) repeat;color:white}
a{cursor: pointer; text-decoration: none;color: white}
a:hover{color:#99ff00;}
img {border:none;}
.green-color{color:#99ff00 !important}
#mainpage{background-color: #6e6e6e;background: url(../image/background/background.jpeg);margin:-8px}
ul{list-style:none}

/*header*/

#header{height: 76px;border-bottom: 7px double;border-color: #73c000;background-color: #252525;margin-bottom:80px}
#headerItem{width:1000px;height:80px;margin:0 auto}
#logo{position:absolute; float:left;left:50%;margin-left:-120px; width:240px;height:160px;background:url(../image/image/logo1.png) no-repeat;}
#logo:hover{background:url(../image/image/logo2.png)}
#login{float: right;font-size: 15px;margin-top: 40px}
#login a{line-height: 45px;}
#logged{display: none}
#avatar{width: 33px;height: 33px;background: white;float: left}
#notLogin{ color:white}

/*end header*/

#content{overflow: auto;width:1000px; margin:auto;margin-bottom:63px;}

/*Left Div*/
#mainpage #leftDiv{float: left;width:177px;}
#mainpage #leftDiv img{position: absolute;left:0;top: 1040px}
.topads{width: 176px;height: 300px;background-image: url(../image/background/topads.png);background-position: -2px -2px;margin-bottom: 15px;}
.yourads{height: 300px;margin-bottom: 15px;background: url(../image/background/ads.png) no-repeat}
.toplist{width:177px; margin-bottom:10px;position: relative;z-index: 5}

.title-line{background:url(../image/image/doubleline.png) left center repeat-x}
.title-line span{text-transform:uppercase; color: white;font-size: 18px;font-family:SFUHelveticaNeueUltraLight; background:url(../image/background/background.jpg) repeat; padding-right:5px;line-height:0px}

.listObject{margin-bottom: 10px}
.listObject a{font-size: 13px;}
.listSong{height:560px;border: 1px solid;border-color: white;color: white;font-size: 11px}
.listSong li{margin-top: 12px;margin-left: 5px}
.listSong ul a:hover .songNumber{background:url(../image/icon/songnumberhover.png) no-repeat !important; color:black}
.songNumber{width:26px; height:25px;background-color: #333333;float: left;font-size: 13px;background:url(../image/icon/songnumber.png) no-repeat; line-height:23px ; text-align:center}
.song{padding-left: 30px;padding-right: 5px;}
.songName{max-height: 28px;overflow: hidden}
/*end Left Div*/

/*right DIv*/
#mainpage #rightDiv{float: left;width:177px;}
#mainpage #rightDiv img{position: absolute;top: 1151px;right: 0;}


/*Center Div*/
#centerDiv{float: left;margin:0 12px;width:620px;}
#slogan{width:620px;height: 250px;background-image: url(../image/image/sloganImg.png);margin-bottom:10px;}
#dot{width: 40px;height: 8px;float: right;margin: 235px 5px 0 0}
.dot{width: 8px;height: 8px;background-image: url(../image/icon/dot.png);float: right;margin-right: 5px}
.bannerAds{width:620px;height:110px;background-color: black;color: white;margin-bottom: 10px;font-size: 18.3px;}
#ads-title{margin:50px 10px 0;float:left}
.googleplay{width: 128px;height: 35px;float: left;background-image: url(../image/image/googlePlay.png);margin: 38px 0px 0 15px;}
.appstore{width:102px;height: 29px;float: left;background-image: url(../image/background/appstore.png);margin: 45px 10px}
.homelink{margin-bottom:20px}

/*user profile*/
.profile{overflow: hidden;margin-bottom:30px;}
.info{float: left;width:118px;}
.profilePicture{width: 106px;height: 122px;margin:2px;position: relative;overflow: hidden}
.profilePicture .profileBackground{width:107px;height:123px;background: url(../image/background/avatar-bg-big.png)no-repeat;z-index: 4;float: left;position: absolute}
.profilePicture img{margin: 4px;z-index: 1;position: absolute;left: 0}
.profilePicture .mask-img{width: 107px;height: 123px;background: url(../image/background/mask-img.jpg);z-index: 2;position: absolute;opacity: 0.7;display: none}
.profilePicture .edit-pf-pic{width: 107px;height: 123px;position: absolute;left: 0;text-align:center;z-index: 5;display: none;}
.profilePicture .edit-pf-pic a{line-height: 123px;}
.profilePicture:hover .edit-pf-pic{display: block}
.profilePicture:hover .mask-img{display: block}
.tag{padding: 10px 15px 0 15px;margin-bottom: 30px}
.tagItem{background:#333333;color:white;border-radius:2px;margin-bottom: 5px;line-height:32px; cursor: pointer;text-align:center;border:2px solid;border-top-color:#222;border-left-color:#222;border-right-color:#4D4B49;border-bottom-color:#4D4B49}
.tagItem:hover{color: black;background:#9f0;border-top-color:#4e7116;border-left-color:#4e7116;border-right-color:#80c021;border-bottom-color:#80c021}
.focus{background:#9f0; color:black;border-top-color:#4e7116;border-left-color:#4e7116;border-right-color:#80c021;border-bottom-color:#80c021}
/*end user profile*/
.mainInfo{width:480px;float: left;padding-left:20px;min-height: 1050px;border-left: 1px solid;border-color: #545455;}
/*index.html*/
.DJprofile{margin-bottom: 15px;color: white;font-size: 15px}
.singerName{font-size: 41px;font-family:SFUHelveticaNeueUltraLight;font-weight:bold }
.following{width:140px;margin:20px 0;text-align: center;line-height:30px;cursor: pointer;}
.following:hover{background:#9f0 !important;color: black;border:1px solid;border-top-color:#50751a;border-left-color:#50751a;border-right-color:#82bf26;border-bottom-color:#82bf26}
.followed {background:#9f0;color: black;border:1px solid;border-top-color:#50751a;border-left-color:#50751a;border-right-color:#82bf26;border-bottom-color:#82bf26}
.unfollow {background:#333 !important;color:black;border:1px solid; border-top-color:#222;border-left-color:#222;border-right-color:#4a4a4d;border-bottom-color:#4a4a4d}
.numbers{height: 35px;text-align: left;max-width:470px;margin-bottom:40px}
.numbers span{float: left;margin-right: 40px;font-size:16.2px;}
.numbers small{font-size: 12px}
.DJprofile ul#clipList {padding:0;}
.DJprofile ul#clipList li {float:left;width:183px;margin:0px 20px;}
.DJprofile ul#clipList li a {}
.DJprofile ul#clipList li div#wrap-image {width:179px;height:114px;position:relative;}
.DJprofile ul#clipList li div#wrap-image a.post-video img {border:1px solid white;}
.DJprofile ul#clipList li div#wrap-image a.play-btn {display:none;width:57px;height:57px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
.DJprofile ul#clipList li div#wrap-image:hover a.play-btn {display:block;}
.DJprofile ul#clipList li a.name {display:block;margin:10px 25px;}
/*end index.html*/

/*youtubepage2.html*/
.youtubepage2 {margin-bottom: 15px;color: white;font-size: 15px}
.youtubepage2 .home{margin-bottom:15px;}
.youtubepage2 .Clip {margin-left:35px;margin-bottom:15px}
.Clip .name{font-size:25px;font-family:SFUHelveticaLight;margin-bottom:20px}
.Clip .wrap-image{width:550px;height:350px;margin-top:20px;border:2px solid;position:relative}
.Clip .clip-title{display:none;position:absolute;font-size:12px;width:100%;height:25px;background:black}
.Clip .clip-title a{line-height: 25px;margin-left: 25px;}
.Clip a.play-btn {display:none;width:149px;height:149px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}
.Clip .wrap-image:hover a.play-btn{display:block}
.Clip .wrap-image:hover div.clip-title {display:block}
.lyric {border:2px solid;border-top-color:#1f1f1f;border-left-color:#1f1f1f;border-right-color:#434644;border-bottom-color:#434644;font-size:13px;padding:0 35px;background:#333}
.link2Facebook{padding:15px 35px;margin-bottom:20px}
.link2Facebook ul{display:-webkit-inline-box;padding:0;margin:0;margin-bottom:15px;}
.link2Facebook ul li{padding:0px;margin-right:10px}
.link2Facebook ul li.number div{background:white;color:black;padding:1px 4px;border-radius:2px}
.link2Facebook .input {padding:3px 5px;background:#eceef4}
.link2Facebook .input img{float:left;margin:2px;}
.link2Facebook .input input{width:90%;}
.youtubepage2 .title-line span{font-size:25px;padding-right:15px;line-height:18px}
.youtubepage2 .title-line{margin-bottom:15px}
.youtubepage2 .cliplist{margin-bottom:20px;height:140px;}
.previous{width:18px;height:49px;float:left;background:url(../image/icon/arrow1.png) no-repeat;cursor:pointer}
.next{width:18px;height:49px;float:right;background:url(../image/icon/arrow2.png) no-repeat;cursor:pointer}
.youtubepage2 .cliplist .list{float:left;margin-left:12px}
.youtubepage2 .cliplist .list ul{display:-webkit-inline-box}
.youtubepage2 .cliplist .list ul li{margin-right:5px;font-size:11.3px}
.youtubepage2 .cliplist .list ul li div#wrap-image {width:181px;height:114px;position:relative;}
.youtubepage2 .cliplist .list ul li div#wrap-image a.post-video img {border:1px solid white;}
.youtubepage2 .cliplist .list ul li div#wrap-image a.play-btn {display:none;width:57px;height:57px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
.youtubepage2 .cliplist .list ul li div#wrap-image:hover a.play-btn {display:block;}
.youtubepage2 .cliplist .list ul li div.name {display:block;text-align:center;line-height:35px}
/*end youtubepage2.html*/

/*edit profile page*/
.editprofile{margin-bottom: 15px;color: white;font-size:15px;}
.editprofile .profilePicture img{background-image: url(../image/image/avatar2.png)}
.editprofile .inputForm{float:left;padding-left:15px;width:485px;}
.editprofile .form-title{font-size:45px;font-weight:100;margin-bottom:20px;}
.row p{float:left;margin:0;line-height:26px;width:220px}
.row{margin-bottom:20px}
.texthint{font-size:13px;float:right;}
.row input{float:left;width:215px;height:20px;font-size:13px}
.row textarea{float: left;width: 258px;height: 170px;resize: none;}
.row .genre{float:right;width:285px;font-size:13px}
.row .genre ul{padding:0;margin:0;}
.row .genre .checkbox{width:16px;height:16px;float:left;background:#333;border:2px solid;border-top-color:#222;border-left-color:#222;border-right-color:#4D4B49;border-bottom-color:#4D4B49}
.row .genre .checked{background:url(../image/icon/check.png) no-repeat 1px;background-color:#333;}
.genre li {margin-bottom:10px;float:left;width:100px;margin-right:5px}
.genre li span{margin-left:5px;cursor: pointer;}
.selectbox {font-size:13px;width:215px;float:left}
.selectbox div{background:white;color:black;padding-left:20px;line-height:26px}
.selectbox .request{border-bottom:1px solid #c7c7c7;}
.selectbox .request div.drop{float:right;width:9px;height:8px;background:url(../image/icon/upIcon.png);padding:0;margin:10px;cursor:pointer}
.selectbox .request div.upIcon{background:url(../image/icon/dropicon.png)}
.selectbox .option:hover{background:#79BDE1;cursor:pointer;}
.Upload{width:230px;float:left;}
.button{margin-bottom:5px}
.button div{background:#333;float:left;border:2px solid;border-top-color:#222;border-left-color:#222;border-right-color:#4D4B49;border-bottom-color:#4D4B49;line-height:26px;padding:0 15px; cursor:pointer}
.button div:hover{color: black;background:#9f0;border-top-color:#4e7116;border-left-color:#4e7116;border-right-color:#80c021;border-bottom-color:#80c021}
.Upload .progress{background:#cccccc;color:#555;padding:0 15px;font-size:10px;height:30px;margin-bottom:5px}
.Upload .progress .fileInfo{height:20px;}
.Upload .progress .filename{float:left;line-height:20px}
.Upload .progress .percent{float:right;line-height:20px}
.Upload .progress .meter{height:3px;border:1px solid #b6eb52;background:#a8ff00}
.Upload .uploadfile{width:71px;height:71px;background:url(../image/image/avatar3.png);}
.listphoto{width: 285px;float: right;}
.submit-btn{float: left;margin-left: 210px;}
.submit-btn .button{float:right;margin-left:10px}
/*end edit profile page*/

/*event page2*/
.eventpage2{min-height:1000px}

.eventpage2 .title-line{margin-bottom:30px}
.eventpage2 .title-line span{font-size:25px}
.listEvents{margin:0 25px}
.listEvents ul{margin:0;padding:0;display:inline-block;}
.listEvents ul li{width:132px;height:240px; font-size:11.3px;text-align:center;margin-right:5px;float:left;position:relative;margin-bottom:10px}
.listEvents ul li img{border:2px solid white;margin-bottom:10px}
.listEvents ul li:hover .datetime{display:block;z-index:1;background:rgba(0,0,0,0.5)}
.listEvents ul li .datetime{width:128px;height:165px;color:white;font-size:11px;position:absolute;top:2px;left:2px;padding-top:20px;display:none}
.listEvents ul li .datetime span{font-size:18px;color:#9f0}
.eventpage2 .slide-event .previous{margin-top:200px}
.eventpage2 .slide-event .next{margin-top:-305px}
/*end event page2*/

/*event page1*/
.eventpage .DJ-info{position:relative}
.eventpage .DJ-info p{font-size:13px;line-height:25px;padding-left:40px}
.eventpage .DJ-info p span{font-size:25px}
.eventpage .DJ-info div.DJ-picture{text-align:center;margin:40px}
.eventpage .DJ-info div.DJ-picture img{border:2px solid white;}
.eventpage .DJ-info .DJ-info{border:1px solid;border-top-color:#222;border-left-color:#222;border-right-color:#504e4e;border-bottom-color:#504e4e;padding:20px 40px;background:#333;font-size:13px}
.eventpage .link2Facebook .update{font-size:12px}
.eventpage .title-line{margin-bottom:20px}
.eventpage .slide-event .previous{margin-top:70px}
.eventpage .listEvents ul li{margin-right:10px}
.eventpage .slide-event .next{margin-top:-181px}
/*end event page1*/

/*home event page2*/
.mainInfo .title-line{margin-bottom:20px}
.mainInfo .listEvents{margin:0}
.mainInfo .listEvents li{height:100%;margin-right:25px;}
.mainInfo .nextpage{float:right;background: url(../image/icon/next.png)no-repeat right 7px;padding-right: 20px;font-size:20px}
.mainInfo .nextpage:hover{background: url(../image/icon/next2.png)no-repeat right 7px;}
/*home event page2*/

/*home event page*/
.home-eventpage .DJ-info{font-size:13px;}
.home-eventpage .DJ-info p{line-height:25px}
.home-eventpage .DJ-info p span{font-size:25px}
.home-eventpage .DJ-info {padding-right: 40px}
/*home event page*/

/*home feed dj page*/
.home-feed-djpage .mainInfo{padding-left: 10px}
.post {width:100%;float: left;margin-bottom: 10px}
.post .profilePicture{width: 51px;height: 59px;margin:1px;position: relative;float: left}
.post .profilePicture .profileBackground{width:51px;height:59px;background: url(../image/background/avatar-bg-stt.png)no-repeat;z-index: 3;float: left}
.post .profilePicture img{margin:2px 1px;z-index: 1;position: absolute;left: 0}
.post .new-post{float: left;padding: 5px 10px;}
.post .new-post h3{font-weight: normal}
.new-post span{font-size: 13px;margin-right: 5px}
.new-post span:hover{color: #99ff00;cursor: pointer;text-decoration: underline}
.new-post .post-status{background: url(../image/icon/status-icon.png) no-repeat left center; padding-left: 20px}
.new-post .post-music{background: url(../image/icon/music-icon.png) no-repeat left center;padding-left: 10px }
.post-type .post-event{background: url(../image/icon/event-icon.png) no-repeat left center; padding-left: 15px}
.post-type .post-video{background: url(../image/icon/video-icon.png) no-repeat left center; padding-left: 20px}
.post-type .post-photo{background: url(../image/icon/photo-icon.png) no-repeat left center; padding-left: 20px}
.post-type{margin-bottom: 3px}
.new-post div.small-icon{width: 18px;height: 10px;background: url(../image/icon/post-box-border.png);margin-left: 20px;position: absolute;z-index: 5}
.new-post div.status-box textarea{width:340px;height: 18px;resize: none;border: 1px solid #999;margin-top: 8px;padding:5px 10px}
.new-post .photo-box{display: none}
.new-post .photo-box .small-icon{margin-left: 67px !important}
.new-post div.up-photo {border: 1px solid #999;margin-top: 8px;background: white;color:black;font-size: 13.6px}
.new-post div.up-photo h5{padding: 4px 10px;font-weight: normal}
.up-photo div{float: left;text-align: center;top: 0;bottom: 0;line-height: 45px;padding: 0 15px;cursor: pointer;border-top: 1px solid #999}
.up-photo div:hover{background: #ccc}
.up-photo .up-photo-btn{border-right: 1px solid #999}
.post .detail{float: left;padding:10px;width:400px}
.post .detail div{font-size: 11.5px}
.post .detail div .singerName{font-size: 20px}
.post .detail p{margin-bottom: 10px}
.post .detail .link2Facebook{padding:15px 0}
.post .detail .link2Facebook .input{margin-top: 10px;color: black;}
.post .detail .link2Facebook .link a{margin-right: 20px}
.post .detail .link2Facebook .input img{margin: 0}
.post .detail .link2Facebook .input a{color: blue}
.post .detail .link2Facebook .input h4{line-height: 10px;margin-bottom: 10px;}
.post .detail .link2Facebook .input h4 img{margin-right: 5px}
.up-music{display: none;background: #444;color: white;top:0;left: 50%;margin:500px -285px;padding: 40px;;z-index: 11;position: absolute;font-family:SFUHelveticaLight,"Myriad Pro", Arial, Helvetica, sans-serif;}
.up-music h1{font-weight: normal;font-size: 45px;margin-bottom: 20px}

.up-youtube{display: none;background: #444;color: white;top:0;left: 50%;margin:500px -285px;padding: 40px;;z-index: 11;position: absolute;font-family:SFUHelveticaLight,"Myriad Pro", Arial, Helvetica, sans-serif;}
.up-youtube h1{font-weight: normal;font-size: 45px;margin-bottom: 20px}

.up-event{display: none;background: #444;color: white; top:0;left: 50%;margin:500px -285px;padding: 40px;;z-index: 11;position: absolute;font-family:SFUHelveticaLight,"Myriad Pro", Arial, Helvetica, sans-serif;}
.up-event h1{font-weight: normal;font-size: 45px;margin-bottom: 20px}
/*end home feed dj page*/

/*home music dj page*/
.music-list {float: left}
.music-list ul li{float: left}
.music-list .profilePicture{width: 51px;height: 59px;margin:1px;position: relative;float: left}
.music-list .profilePicture .profileBackground{width:51px;height:59px;background: url(../image/background/avatar-bg-stt.png)no-repeat;z-index: 3;float: left}
.music-list .profilePicture img{margin:2px 1px;z-index: 1;position: absolute;left: 0}
.music-list .song-info{width:130px;font-size: 13.5px;float: left;margin-left: 10px}
.music-list .listen-time{float: right;background: url(../image/icon/headphone-icon.png)no-repeat 0 5px;padding-left: 15px}

/*end home music dj page*/

/*end content*/

/*footer*/
#footer{padding:30px 0 50px;font-size: 15px;border-top: 2px solid #99ff00; position: relative;z-index: 5}
#footerItem{text-align: center; width:700px;margin:0 auto}
#footerItem a{color: white;padding-bottom: 3px;}
#footerItem a:hover{border-bottom:1px solid #99ff00;color:#9f0}
#footerItem span{color:white;}
#facebookLink{float: right;margin-top:-10px;}
#radioIcon{position: absolute;background:url(../image/background/background.jpg);left:50%;margin-left:-29px;margin-top:-51px}

/*pop-up*/

#pop-up{width: 100%;background-color: black;opacity: .4;position: absolute;z-index: 10;display: none;font-family:SFUHelveticaLight,"Myriad Pro", Arial, Helvetica, sans-serif;}
#loginPage{background: white;z-index: 11;position: absolute;top: 275px;left: 550px;overflow: hidden;font-size: 13px;display: none;color:black}
#loginPage input{width: 215px;margin: 10px 0;border: 1px solid;border-color: #e0e0e0; color:white;font-weight:bold}
#loginPage p{font-size: 30px;letter-spacing: -2px;margin: 0 0 30px}
#loginDiv{float: left;padding: 50px}
#loginDiv a{float: right;text-decoration: underline;color:#959da2}
#loginDiv a:hover{color:#9f0}
#btnSignin{width:80px !important;height: 25px;background-color: #a0a0a0;float: right;cursor: pointer}
#linkIcon{margin-top: 40px}
#linkIcon div{float: left}
.icon{width: 27px;height: 27px;background-repeat: no-repeat;margin-left: 20px;cursor: pointer}
.face{background-image: url(../image/icon/face.png)}
.google{background-image: url(../image/icon/google+.png)}
.yahoo{background-image: url(../image/icon/yahoo.png)}
#registerDIv{float: left;padding: 20px;border-left: 1px dotted}
.close{float: right;cursor:pointer}
#inputInfo{padding: 30px}
#confirmkey input{float: right;width: 100px;margin: 5px 0}
#keypicture{width: 75px;height: 30px;border: 1px solid;background-image: url(../image/image/key.png);background-repeat: no-repeat;float: left}
#refresh{width: 11px;height: 12px;float: left;background-image: url(../image/icon/refresh.png);background-repeat: no-repeat;margin: 10px;cursor: pointer}
#btnSignup{width:80px !important;height: 25px;border: none;background-color: #a0a0a0;float: right;cursor: pointer;margin-top: 25px !important}
/*end pop-up*/
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
